<template>
    <div class="container">
        <el-form class="screach" :inline="true" :model="formData">
            <el-form-item v-if="props.replyType === 'privateChat'" label="触发用户">
                <el-input v-model="formData.keyword" placeholder="请输入用户名称" clearable />
            </el-form-item>
            <el-form-item v-else label="触发用户/群聊">
                <el-input v-model="formData.keyword" placeholder="请输入用户/群聊名称" clearable />
            </el-form-item>
            <el-form-item label="触发时间">
                <el-date-picker v-model="formData.time" type="daterange" start-placeholder="开始时间" end-placeholder="结束时间"
                    format="YYYY-MM-DD" value-format="YYYY-MM-DD HH:mm:ss" :default-time="defaultTime" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSearch">查询</el-button>
                <el-button @click="onReset">清空</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from "vue";
const emit = defineEmits(["search", "reset", "create"]);
const props = defineProps({
    replyType: {
        type: String,
    }
})
const defaultTime = ref<[Date, Date]>([
    new Date(2000, 1, 1, 0, 0, 0),
    new Date(2000, 2, 1, 23, 59, 59),
])

/**
 * 搜索表单数据
 */
const formData = reactive<IFormData>({
    keyword: '',
    time: []
});
const onSearch = () => {
    emit('search', { ...formData })
};
const onReset = () => {
    for (const key in formData) {
        formData[key] = undefined
    }
    emit('reset', { ...formData })
};

defineExpose({
    reset: onReset
})

interface IFormData {
    /** 用户名称 */
    keyword: string;
    /** 触发时间 */
    time: string[];
}


</script>
<style lang="scss" scoped>
.title {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 10px;
}

.container {
    display: flex;
    justify-content: space-between;

    .screach {
        :deep(.el-form-item) {
            margin-bottom: 12px;

            .el-input,
            .el-select,
            .el-date-editor {
                width: 220px;
            }
        }
    }
}
</style>
